<template>
	<view class="">
		<NavBar title="结算数据" :isShowLeftBtn="true">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}">
		<view class="condition_box flex_both m_b_44">
			<view class="condition_calendar flex_both" @click="showCalendar('begin')">
				<text class="f_24_0">
					{{form.begin_date}}
				</text>
				<view class="m_b_14">
					<up-image :show-loading="true" src="/static/images/my/calendar_icon.png" width="28rpx"
						height="28rpx"></up-image>
				</view>
			</view>
			<view class="condition_hr">

			</view>
			<view class="condition_calendar flex_both" @click="showCalendar('end')">
				<text class="f_24_0">
					{{form.end_date}}
				</text>
				<view class="m_b_14">
					<up-image :show-loading="true" src="/static/images/my/calendar_icon.png" width="28rpx"
						height="28rpx"></up-image>
				</view>
			</view>
			<view class="condition_btn" @click="onSearch">
				<text class="f_26_f">
					搜索
				</text>
			</view>
		</view>
		<view class="main">
			<view class="main_header flex_both">
				<view class="" style="width: 450rpx;">
					<text class="f_28_0_b u-line-1">
						XXX洗车店 — 结算数据XXX洗车店 — 结算数据
					</text>
				</view>
				<view class="main_header_btn" @click="exportExcel">
					<view class="m_b_10">
						<text class="f_24_f" style="color: #F94219;">
							导出数据
						</text>
					</view>
				</view>
			</view>
			<view class="table_header flex">
				<view class="table_header_col table_header_col1">
					<text class="f_26_0">
						序号
					</text>
				</view>
				<view class="table_header_col table_header_col2">
					<text class="f_26_0">
						开始日期
					</text>
				</view>
				<view class="table_header_col table_header_col3">
					<text class="f_26_0">
						结束日期
					</text>
				</view>
				<view class="table_header_col table_header_col4">
					<text class="f_26_0">
						车型
					</text>
				</view>
				<view class="table_header_col table_header_col5">
					<text class="f_26_0">
						洗车次数
					</text>
				</view>
			</view>
			<scroll-view scroll-y="true" :style="{height: viewHeight}" :refresher-threshold="100"
				@scrolltolower="scrolltolowerFun" refresher-enabled="true" refresher-default-style="none">
				<view class="main_list">
					<view class="table_content">
						<view class="main_item table_content_row flex" v-for="(item,index) in dataList">
							<view class="table_content_row_col table_content_row_col1">
								<text class="f_24_0 u-line-1">
									{{index + 1}}
								</text>
							</view>
							<view class="table_content_row_col table_content_row_col2">
								<text class="f_24_0 u-line-1">
									{{item.begin_date}}
								</text>
							</view>
							<view class="table_content_row_col table_content_row_col3">
								<text class="f_24_0 u-line-1">
									{{item.end_date}}
								</text>
							</view>
							<view class="table_content_row_col table_content_row_col4">
								<text class="f_24_0 u-line-1">
									{{item.carTypeName}}
								</text>
							</view>
							<view class="table_content_row_col table_content_row_col5">
								<text class="f_24_0 u-line-1">
									{{item.count}}
								</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<wu-calendar ref="calendar" @confirm="calendarConfirm" :insert="false" :monthShowCurrentMonth="true"
			color="#FE5E10" operationPosition="bottom"></wu-calendar>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	const viewHeight = ref()
	const sId = ref(0)
	onLoad((e) => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 76}rpx)`
				viewHeight.value = `calc(100vh - ${statusBarHeight.value + 342}rpx)`
			}
		});
		sId.value = e.id
		initTime()
		childShopMoney()
	})

	// 开始和结束时间
	const form = ref({
		begin_date: '',
		end_date: ''

	})
	const initTime = () => {
		let time = proxy.$gloab.formatDateY_M_D(new Date(), '-')
		console.log(time);
		form.value.begin_date = time
		form.value.end_date = time
	}
	const calendar = ref(null)
	const timeActive = ref('')
	const showCalendar = (e) => {
		timeActive.value = e
		calendar.value.open()
	}
	const calendarConfirm = (e) => {
		if (timeActive.value == 'begin') {
			form.value.begin_date = e.fulldate
		} else if (timeActive.value == 'end') {
			form.value.end_date = e.fulldate
		}
	}

	const dataList = ref([])
	const childShopMoney = async () => {
		let res = await proxy.$http('my.childShopMoney', { shop_id: sId.value, begin_date: form.value.begin_date, end_date: form.value.end_date, is_export: 0 })
		dataList.value = res.data
	}

	const onSearch = () => {
		dataList.value = []
		childShopMoney()
	}

	// 审核消息列表
	// const page = ref(1)
	// const loadShow = ref(false)
	// const loadMessage = ref('加载中')
	const scrolltolowerFun = () => {
		// page.value = ++page.value;
		// loadShow.value = true;
		// setTimeout(() => {
		// }, 1000)
	}
	const exportExcel = async () => {
		let res = await proxy.$http('my.childShopMoney', { shop_id: sId.value, begin_date: form.value.begin_date, end_date: form.value.end_date, is_export: 1 })
		if(res.code == 1){
			uni.downloadFile({
				url: res.data, //下载地址，后端接口获取的链接
				header: {
					'content-type': 'application/json',
				},
				success: (data) => {
					console.log(data.tempFilePath)
					console.log(JSON.stringify(data))
					if (data.statusCode === 200) {
						wx.getFileSystemManager().saveFile({
							tempFilePath: data.tempFilePath,
							success: function (res) {
								// 保存文件成功
								wx.openDocument({
									filePath: res.savedFilePath,
									showMenu: true,
								})
							},
							fail: function (error) {
								// 保存文件失败
								console.log(error)
							}
						})
					}
				},
				fail: (err) => {
					console.log(err);
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '失败请重新下载',
					});
				},
			});
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #F7F8FC;
		padding: 20rpx;
		padding-bottom: 64rpx;

		.condition_box {
			.condition_calendar {
				width: 210rpx;
				padding: 0 22rpx;
				height: 63rpx;
				background: #FFFFFF;
				box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
				border-radius: 10rpx;
			}

			.condition_hr {
				width: 26rpx;
				height: 2rpx;
				background: #000000;
			}

			.condition_btn {
				width: 119rpx;
				height: 63rpx;
				background: linear-gradient(90deg, #F93E19, #F75C1B);
				box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.main {
			background: #FFFFFF;
			box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
			border-radius: 10rpx;

			.main_header {
				height: 78rpx;
				padding: 0 24rpx;

				.main_header_btn {
					width: 133rpx;
					height: 47rpx;
					background: #FFFFFF;
					border-radius: 5rpx;
					border: 2rpx solid #F74A1B;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.table_header {
				height: 78rpx;
				background: #E4E3E3;

				.table_header_col {
					flex-shrink: 0;
					height: 78rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.table_header_col1,
				.table_header_col2,
				.table_header_col3,
				.table_header_col4 {
					border-right: 2rpx solid #F3F3F1;
				}

				.table_header_col1 {
					width: 88rpx;
				}

				.table_header_col2 {
					width: 166rpx;
				}

				.table_header_col3 {
					width: 166rpx;
				}

				.table_header_col4 {
					width: 134rpx;
				}

				.table_header_col5 {
					width: 146rpx;
				}

			}

			.table_content {
				.table_content_row {
					.table_content_row_col {
						flex-shrink: 0;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.table_content_row_col1,
					.table_content_row_col2,
					.table_content_row_col3,
					.table_content_row_col4 {
						border-right: 2rpx solid #F3F3F1;
					}

					&:not(:nth-last-child(1)) {
						border-bottom: 2rpx solid #F3F3F1;
					}

					.table_content_row_col1 {
						width: 88rpx;
					}

					.table_content_row_col2 {
						width: 166rpx;
					}

					.table_content_row_col3 {
						width: 166rpx;
					}

					.table_content_row_col4 {
						width: 134rpx;
					}

					.table_content_row_col5 {
						width: 146rpx;
					}
				}
			}

		}
	}
</style>